<template>
  <div class="login-form-card">
    <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    size="large"
    class="github-style-form"
  >
    <el-form-item label="用户名/邮箱" prop="username" class="form-item-block">
      <el-input 
        v-model="ruleForm.username" 
        placeholder="请输入用户名/邮箱"
        class="github-input"
      />
    </el-form-item>
    <el-form-item label="密码" prop="password" class="form-item-block">
      <el-input
        v-model="ruleForm.password"
        type="password"
        placeholder="请输入密码"
        class="github-input"
        show-password
      />
    </el-form-item>
    <el-form-item>
      <el-button 
        type="primary" 
        @click="submitForm(ruleFormRef)"
        class="sign-in-button"
      >登录</el-button>
    </el-form-item>
    <div class="forgot-password-link">
      <el-link @click="goForgotPassword" type="primary">忘记密码？</el-link>
    </div>
  </el-form>
  </div>
 
  <div class="register-link">
    还没有账号？
    <el-link @click="goRegister"  type="primary">去注册</el-link>
  </div>
</template>

<script lang="ts" setup>
// 保持原有的script部分完全不变
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { login } from '@/api/login.ts';
import {ElMessage, ElMessageBox} from 'element-plus'
import { useRouteStore } from "@/store/route.ts";
const ruleFormRef = ref();
const routeStore = useRouteStore();
const route = useRoute();
const router = useRouter();
const ruleForm = reactive({
  username: "",
  password: "",
  // 解析查询参数
  response_type: route.query.response_type,
  client_id: route.query.client_id,
  redirect_uri: route.query.redirect_uri,
  scope: route.query.scope,
  state: route.query.state,
  code_challenge: route.query.code_challenge,
  code_challenge_method: route.query.code_challenge_method,
});

const rules = {
  username: [{ required: true, message: "请输入用户名/邮箱", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
};

const submitForm = async (formEl: any) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      const response = await login(ruleForm);
      if(response.success){
        window.location.href =  response.redirectUri
      }
    }
  });
};

const goRegister = () => {
  routeStore.setQuery(route.query)
  router.push({ path: "/register"});
};

const goForgotPassword = () => {
  routeStore.setQuery(route.query)
  router.push({ path: "/forget"});
};
</script>

<style lang="scss" scoped>
.github-style-form {
  width: 100%;
  
  .form-item-block {
    display: block;
    margin-bottom: 16px;
    
    :deep(.el-form-item__content) {
      display: block;
      margin-left: 0 !important;
      line-height: normal;
    }

    :deep(.el-form-item__label) {
      display: block;
      text-align: left;
      padding: 0 0 8px 0;
      margin: 0;
      line-height: 1.5;
      font-weight: 600;
      font-size: 14px;
      color: #24292f;
      width: 100% !important;
      float: none !important;
      
      &::before {
        content: "*";
        color: #f56c6c;
        margin-right: 4px;
      }
    }
  }

  .github-input {
    width: 100%;
    
    :deep(.el-input__inner),
    :deep(.el-input__wrapper) {
      width: 100%;
      padding: 8px 12px;
      font-size: 14px;
      line-height: 20px;
      background-color: #f6f8fa;
      border-radius: 6px;
      box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
      border: 1px solid #d0d7de;
      
      &:hover {
        background-color: #ffffff;
        border-color: #0969da;
      }
      
      &:focus-within {
        background-color: #ffffff;
        border-color: #0969da;
        box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.3);
      }
    }
  }

  .sign-in-button {
    width: 100%;
    margin-top: 8px;
    background-color: #2da44e;
    border-color: rgba(27, 31, 36, 0.15);
    color: white;
    font-weight: 600;
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 6px;
    
    &:hover {
      background-color: #2c974b;
    }
    
    &:active {
      background-color: #298e46;
    }
  }
}

@media (max-width: 600px) {
  .github-style-form {
    padding: 0;
    .form-item-block {
      margin-bottom: 12px;
    }
    .github-input {
      :deep(.el-input__inner),
      :deep(.el-input__wrapper) {
        font-size: 16px;
        padding: 12px 10px;
      }
    }
    .sign-in-button {
      font-size: 16px;
      padding: 12px 0;
    }
  }
}

.register-link {
  margin-top: 16px;
  text-align: center;
  font-size: 14px;
}

.login-form-card{
  background: #f6f8fa;
  border-radius: 8px;
  box-shadow: 0 4px 32px rgba(27, 31, 35, 0.07);
  border: 1px solid #d0d7de;
  padding: 15px;
}

.forgot-password-link {
  text-align: right;
  margin-bottom: 8px;
  font-size: 14px;
}
</style>